<template>
    <el-menu default-active="2-1" class="el-menu-vertical-demo" :default-openeds="defaultOpenList" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-menu-item index="1" @click="turnPage('/')">
            <i class="el-icon-menu"></i>
            <span slot="title">执行页面</span>
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">设计页面</span>
            </template>
            <el-menu-item index="2-1" @click="turnPage('/preview')">設計預覽</el-menu-item>
            <el-menu-item index="2-2" @click="turnPage('/pagefile')">頁面檔案</el-menu-item>
            <el-menu-item index="2-3" @click="turnPage('/graphicfile')">图控设计</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">系统配置</span>
            </template>
            <el-menu-item index="3-1" @click="turnPage('/file')">档案菜单配置</el-menu-item>
            <el-menu-item index="3-2" @click="turnPage('/scada')">SCADA维护</el-menu-item>
            <el-menu-item index="3-3" @click="turnPage('/equipment')">设备连线维护</el-menu-item>
            <el-menu-item index="3-4" @click="turnPage('/tag')">TAG维护</el-menu-item>
            <el-menu-item index="3-5" @click="turnPage('/alarm')">报警服务配置</el-menu-item>
        </el-submenu>
        <el-menu-item index="4"  @click="turnPage('/authority')">
            <i class="el-icon-setting"></i>
            <span slot="title">权限管理</span>
        </el-menu-item>
    </el-menu>
</template>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
  }
</style>
<script>
export default {
    props:['isCollapse'],
    data(){
        return {
            isPlat:false,
            defaultOpenList:['2-1']
        }
    },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        turnPage(path){
            this.$router.push(path);
            this.$emit('collapsed',true)
        }
    }
}
</script>